<template>
	<view class="bi-dynamic-form-control">
		<template v-if="schema.type === 1">
			<dynamic-form-control-textbox
				:value="value"
				:schema="schema"
				@input="handleInputChange"
			></dynamic-form-control-textbox>
		</template>
		<template v-else-if="schema.type === 2">
			<dynamic-form-control-textarea
				:value="value"
				:schema="schema"
				@input="handleInputChange"
			></dynamic-form-control-textarea>
		</template>
		<template v-else-if="schema.type === 3">
			<dynamic-form-control-date-picker
				:value="value"
				:schema="schema"
				@input="handleInputChange"
			></dynamic-form-control-date-picker>
		</template>
		<template v-else-if="schema.type === 5">
			<dynamic-form-control-radio
				:value="value"
				:schema="schema"
				@input="handleInputChange"
			></dynamic-form-control-radio>
		</template>
		<template v-else-if="schema.type === 6">
			<dynamic-form-control-checkbox
				:value="value"
				:schema="schema"
				@input="handleInputChange"
			></dynamic-form-control-checkbox>
		</template>
		<template v-else-if="schema.type === 7">
			<dynamic-form-control-dropdown
				:value="value"
				:schema="schema"
				@input="handleInputChange"
			></dynamic-form-control-dropdown>
		</template>
		<template v-else>
			不支持的渲染组件{{schema.type}}
		</template>
	</view>
</template>

<script>
import DynamicFormControlDatePicker from './dynamic-form-control-date-picker.vue'
import DynamicFormControlRadio from './dynamic-form-control-radio.vue'
import DynamicFormControlTextarea from './dynamic-form-control-textarea.vue'
import DynamicFormControlTextbox from './dynamic-form-control-textbox.vue'
import DynamicFormControlCheckbox from './dynamic-form-control-checkbox.vue'
import DynamicFormControlDropdown from './dynamic-form-control-dropdown.vue'

export default {
	name: 'BiDynamicFormControl',
	components: {
		DynamicFormControlDatePicker,
		DynamicFormControlRadio,
		DynamicFormControlTextarea,
		DynamicFormControlTextbox,
		DynamicFormControlCheckbox,
		DynamicFormControlDropdown
	},
	props: {
		value: {
			type: null
		},
		schema: {
			type: Object,
			required: true
		}
	},
	computed: {
		controlMap () {
			return {
				0: 'None',
				1: 'SingleLineText',
				2: 'MultiLineText',
				3: 'Date',
				4: 'Number',
				5: 'Radio',
				6: 'CheckBox',
				7: 'DropDown',
				8: 'Image',
				9: 'Video'
			}
		}
	},
	methods: {
		handleInputChange (val) {
			this.$emit('input', val)
		}
	}
}
</script>

<style>
</style>
